@charset "UTF-8";
@import "./kb.scss";

.settings {
    box-sizing: border-box;
    min-height: calc(100vh - 124px);
    background-color: #fff;
    border-top: 1px solid #e4e7ed;
}

.settings-tabs {
    padding-top: 20px;
}

// bindAccount.vue start

.bindAccount {
    background-color: #fff;
    .not-opened{
        color: #338efc;
    }
    .preson-email {
        padding: 40px 0;
    }

    .ipng {
        display: inline-block;
        width: 40px;
        height: 40px;
        background-image: url("../../../../public/images/ipng.png");
        background-repeat: no-repeat;
        vertical-align: middle;
    }

    .box {
        .icon_yiouxiang {
            background-position: -491px -473px;
        }

        .icon_shouji {
            background-position: -250px -682px;
        }

        .tips {
            display: inline-block;
            vertical-align: middle;
            margin-left: 20px;
        }

        .p1 {
            font-size: 14px;

            strong {
                color: #d12856;
                margin-left: 15px;
            }
        }

        .p2 {
            font-size: 12px;
            color: #888888;
            margin-top: 8px;
        }
    }

    .roundBtn {
        width: 100px;
        height: 36px;
        padding: 0;
        margin-left: 10px;
    }

    .accountDialog {
        .el-dialog__header {
            background-color: #338efc;
            padding: 8px 20px 8px;
        }

        .el-dialog__body {
            padding: 30px 20px 10px;
        }

        .el-dialog__title {
            color: #fff;
            font-size: 14px;
        }

        .el-dialog__headerbtn {
            top: 8px;
        }

        .el-dialog__headerbtn .el-dialog__close {
            color: #fff;
            font-size: 24px;
        }

        .el-dialog__headerbtn .el-dialog__close:hover {
            color: rgba(255, 255, 255, 0.8);
        }

        .codeInput {
            width: 67%;
            margin-right: 10px;
        }

        .getCodeBtn {
            width: 112px;
            padding: 12px 10px;
        }

        .submit-item {
            text-align: center;

            .el-button {
                width: 102px;
                height: 35px;
                padding: 0;
            }

            .el-form-item__content {
                margin-left: 0 !important;
            }
        }
    }
}

// bindAccount.vue end

// faceCollection.vue start
.faceCollection1 {
    overflow: hidden;

    .collect-title {
        padding: 30px 0;

        i {
            border-left: 4px solid #338efc;
            vertical-align: middle;
            padding-right: 8px;
        }

        span {
            font-size: 16px;
            font-weight: 600;
            vertical-align: middle;
            color: #000;
        }
    }

    .collect-ways {
        .el-radio {
            width: 100px;
            height: 50px;
            padding: 18px 24px;
        }

        .el-radio.is-bordered.is-checked {
            background-color: #ecf5ff;
        }

        .el-radio+.el-radio {
            margin-left: 15px;
        }

        .el-radio__input {
            display: none;
        }
    }

    .info-form {
        display: inline-block;
        width: 590px;
        box-sizing: border-box;
        padding-top: 40px;

        .el-radio.is-bordered.is-checked {
            background-color: #ecf5ff;
        }

        .el-radio+.el-radio {
            margin-left: 15px;
        }

        .el-radio__input {
            display: none;
        }

        .demo-ruleForm {
            .el-select {
                width: 100%;
            }

            .el-input__inner {
                height: 36px;
            }
        }
    }

    .collect-photo {
        .collect-tools {
            .to-shot {
                padding-bottom: 25px;
            }

            .local-upload {
                padding: 25px 0;
            }

            .pc-camera-btn {
                vertical-align: middle;
                width: 400px;
                height: 68px;
                &:hover .camera-icon {
                    background: url("../../../../public/images/settings/paizhao02.png") no-repeat;
                }

                i {
                    vertical-align: middle;
                }

                .camera-icon {
                    display: inline-block;
                    margin-right: 45px;
                    width: 36px;
                    height: 44px;
                    background: url("../../../../public/images/settings/paizhao01.png") no-repeat;
                }
            }

            .choosePic {
                display: inline-block;
                vertical-align: middle;
                .localUpload-btn {
                    vertical-align: middle;
                    width: 400px;
                    height: 60px;
                    position: relative;
    
                    &:hover .localUpload-icon {
                        background: url("../../../../public/images/settings/picIcont (2).png") no-repeat;
                    }
                    #localUploadBtn{
                        position: absolute;
                        font-size: 100px;
                        right: 0;
                        top: 0;
                        opacity: 0;
                        cursor: pointer;
                    }
                    i {
                        vertical-align: middle;
                    }
    
                    .localUpload-icon {
                        display: inline-block;
                        margin-right: 45px;
                        width: 40px;
                        height: 44px;
                        background: url("../../../../public/images/settings/picIcont (1).png") no-repeat;
                    }
                }

                .uploader-example {
                    opacity: 0;
                    display: none;
                  }
                // .change-icon {
                //     display: inline-block;
                //     width: 40px;
                //     height: 37px;
                //     margin-left: -56px;
                //     margin-right: 50px;
                //     background: url("../../../../public/images/settings/picIcont (1).png") no-repeat;
                // }
                // .uploader-drop {
                //     padding: 0;
                //     border: none;
                //     background-color: #fff;

                //     .uploader-btn {
                //         border-radius: 4px;
                //         border: 1px solid #dcdfe6;
                //         box-sizing: border-box;
                //         width: 400px;
                //         height: 68px;
                //         line-height: 68px;
                //         padding: 0;
                //         text-align: center;

                //         i {
                //             font-size: 14px;
                //             vertical-align: middle;
                //         }

                //         &:hover {
                //             background-color: #ecf5ff;
                //             border: 1px solid #c6e2ff;
                //             color: #409eff;
                //         }

                //         &:hover .change-icon {
                //             background: url("../../../../public/images/settings/picIcont (2).png") no-repeat;
                //         }
                //     }
                // }
            }

            .tips {
                font-size: 14px;
                letter-spacing: 0.11px;
                margin-left: 230px;

                p {
                    color: #999;
                    line-height: 22px;
                    font-size: 14px;
                }
            }
        }
    }

    .view-photo {
        .img-item {
            box-sizing: border-box;
            float: left;
            margin: 0 16px 16px 0;
            padding: 2px;
            // cursor: pointer;
            border: 2px solid #e4e7ed;
            transition: border-color 0.3s ease;
            position: relative;

            &:hover {
                border-color: #c6e2ff;
            }

            // &:hover>.picTools{
            // display: block;
            // }
            &:hover>.delPic {
                display: block;
            }

            img {
                display: block;
                width: 180px;
                height: 180px;
                background-color: #effaff;
            }
        }

        .empty-tips {
            width: 100%;
            height: 180px;
            line-height: 180px;
            text-align: center;
            background-color: #effaff;
            color: #999;
            font-size: 16px;
        }

        .b-red {
            border-color: red;
        }

        .delPic {
            display: none;
            // padding: 5px;
            position: absolute;
            top: 0;
            right: 0;
            font-size: 24px;
            // color: #c6e2ff;
            background-color: #e4e7ed;
            // border-radius: 0 0 0 50%;
            cursor: pointer;
        }
    }

    .send-info {
        text-align: center;
        padding: 50px 0;

        .el-button {
            width: 80px;
            height: 32px;
            padding: 0;
        }
    }

    .dialog-common {
        .el-dialog__header {
            background-color: #338efc;
            padding: 8px 20px 8px;
        }

        .el-dialog__title {
            color: #fff;
            font-size: 14px;
        }

        .el-dialog__headerbtn {
            top: 8px;
        }

        .el-dialog__headerbtn .el-dialog__close {
            color: #fff;
            font-size: 24px;
        }

        .el-dialog__headerbtn .el-dialog__close:hover {
            color: rgba(255, 255, 255, 0.8);
        }
    }

    .viewdialog {
        .el-dialog__body {
            text-align: center;
            height: 781px;
            box-sizing: border-box;
        }

        .camera-window {
            box-sizing: border-box;
            display: inline-block;
            width: 600px;
            height: 600px;
            padding: 20px;
            background-color: #4d4d4d;
            position: relative;
        }

        .camera-window::before {
            content: "";
            width: 580px;
            height: 580px;
            position: absolute;
            top: 10px;
            left: 10px;
            background: linear-gradient(to left, $sc_1, $sc_1) left top no-repeat,
                linear-gradient(to bottom, $sc_1, $sc_1) left top no-repeat,
                linear-gradient(to left, $sc_1, $sc_1) right top no-repeat,
                linear-gradient(to bottom, $sc_1, $sc_1) right top no-repeat,
                linear-gradient(to left, $sc_1, $sc_1) left bottom no-repeat,
                linear-gradient(to bottom, $sc_1, $sc_1) left bottom no-repeat,
                linear-gradient(to left, $sc_1, $sc_1) right bottom no-repeat,
                linear-gradient(to left, $sc_1, $sc_1) right bottom no-repeat;
            background-size: 2px 28px, 28px 2px, 2px 28px, 28px 2px;
        }

        .camera-window::after,
        .camera {
            width: 560px;
            height: 560px;
            position: absolute;
            top: 20px;
            left: 20px;
        }

        .camera-window::after {
            content: "";
            background: url("../../../../public/images/settings/defBG.png") no-repeat;
        }

        .camera {
            display: inline-block;
            z-index: 3;
        }

        .collect-progress {
            display: inline-block;
            width: 500px;
            padding: 20px 0;
            text-align: center;

            .el-progress__text {
                color: #3bb080;
                font-weight: 600;
            }

            p {
                font-size: 26px;
                line-height: 40px;
                color: #e39a51;
            }
        }

        .startShot {
            .el-button {
                width: 600px;
                height: 48px;
            }

            padding: 20px 0;
            display: inline-block;
            text-align: center;

            .tips {
                font-size: 12px;
                padding-top: 20px;
            }
        }
    }

    .uploaddialog {
        .cropper-window {
            display: inline-block;
            width: 360px;
            height: 360px;
        }

        .cropper-tools {
            width: 346px;

            .el-button {
                padding: 0;
            }
        }

        .cropper-btns {
            .continue-btn {
                position: relative;
                overflow: hidden;

                &:hover .continue-icon {
                    background: url("../../../../public/images/settings/photo (2).png") no-repeat;
                }
            }

            .change-btn {
                margin: 20px 0 30px;
                position: relative;
                overflow: hidden;

                &:hover .change-icon {
                    background: url("../../../../public/images/settings/cercle (2).png") no-repeat;
                }
            }

            i {
                vertical-align: middle;
            }

            .continue-icon,
            .change-icon {
                display: inline-block;
                margin-right: 40px;
            }

            .continue-icon {
                width: 28px;
                height: 27px;
                background: url("../../../../public/images/settings/photo (1).png") no-repeat;
            }

            .change-icon {
                width: 25px;
                height: 30px;
                background: url("../../../../public/images/settings/cercle (1).png") no-repeat;
            }

            .el-button {
                width: 100%;
                height: 48px;
            }

  
            #continueInput,
            #changeInput {
                position: absolute;
                font-size: 100px;
                right: 0;
                top: 0;
                opacity: 0;
                cursor: pointer;
            }

            p {
                font-size: 12px;
            }
        }

        .cropper-icons {
            width: 250px;
            margin-top: 150px;

            i {
                display: inline-block;
                width: 44px;
                height: 44px;
                margin-right: 10px;
                cursor: pointer;
            }

            .cancel-icon {
                background: url("../../../../public/images/settings/cancel (1).png") no-repeat;

                &:hover {
                    background: url("../../../../public/images/settings/cancel (2).png") no-repeat;
                }
            }

            .del-icon {
                background: url("../../../../public/images/settings/del (1).png") no-repeat;

                &:hover {
                    background: url("../../../../public/images/settings/del (2).png") no-repeat;
                }
            }

            .right-icon {
                background: url("../../../../public/images/settings/right (1).png") no-repeat;

                &:hover {
                    background: url("../../../../public/images/settings/right (2).png") no-repeat;
                }
            }
        }

        .face-carousel {
            height: 128px;
            margin-top: 50px;

            .swiper-slide.active {
                border: 2px solid #348efc;
            }

            .swiper-slide {
                box-sizing: border-box;
                background-color: #edf1f5;
                cursor: pointer;
                border: 2px solid transparent;
                padding: 2px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .cut-pic-btns {
            text-align: center;
            padding: 50px 0 0;

            .el-button {
                width: 80px;
                height: 32px;
                padding: 0;
            }
        }
    }
}